<template>
  <div class="container">
    <div class="main">
      <div class="nav">
        <!--目录页-->
        <div class="catalogue" @click="showDom()">
          目录
          <p class="label-1">章节</p>
          <p class="label-2">章节</p>
          <p class="label-3">章节</p>
          <p class="label-4">章节</p>
          <p class="label-4">章节</p>
          <p class="label-4">章节</p>
          <p class="label-4">章节</p>
          <p class="label-4">章节</p>
          <p class="label-4">章节</p>
          <p class="label-4">章节</p>
          <p class="label-4">章节</p>
          <p class="label-4">章节</p>
          <p class="label-4">章节</p>
          <p class="label-4">章节</p>
          <p class="label-4">章节</p>
          <p class="label-4">章节</p>
          <p class="label-4">章节</p>
          <p class="label-4">章节</p>
          <p class="label-4">章节</p>
          <p class="label-4">章节</p>
          <p class="label-5">章节</p>
          <p>章节</p>
          <p>章节</p>
          <p>章节</p>
          <p>章节</p>
          <p>章节</p>
          <p>章节</p>
        </div>
        <div class="menu">
          <div class="container">
            <div class="return" @click="back"><img src="@/assets/svg/上一步_back.svg" alt="图片正在加载"> </div>
            <div class="heart" @click="addGongDe">
              <img src="@/assets/svg/喜欢_like.svg" alt="图片正在加载">
            </div>
          </div>
          <div class="screen"  v-if="visible">
            <img src="@/assets/img/敲木鱼.gif" alt="图片正在飞奔" />
            <audio src="@/assets/audio/敲木鱼音效.mp3" autoplay loop></audio>
          </div>
        </div>
      </div>
      <!--文章详情页-->
      <div class="article">
        <!--他们都还可以粘性定位-->
        <!--<h1>文本</h1>-->
        <!--<h1>文本</h1>-->
        <!--<h1>文本</h1>-->
        <!--<h1>文本</h1>-->
        <!--<h1>文本</h1>-->
        <!--<h1>文本</h1>-->
        <!--<h1>文本</h1>-->
        <!--它不能粘性定位了-->
        <div class="md-parent">
          <mavon-editor
              ref="mavedit"
              class="markdown"
              v-model="article.content"
              :subfield="false"
              defaultOpen="preview"
              previewBackground="#fff"
              :editable="false"
              codeStyle="an-old-hope"
              :box-shadow="false"
              :toolbars="toolbar"
              :toolbarsFlag="false"
              :scrollStyle="false"
          />
        </div>
      </div>

    </div>

    <div style="text-align: center;font-size: 20px;color: #666666;margin: 10px;">-- 别翻了，已经到头了 --</div>
  </div>
</template>

<script>
import {findArticleApi} from '@/api/article'
export default {
  name: "",
  data() {
    return {
        article: {
          content: '# ES6 \n ## 标题2 \n > 这是一段重要提示💡 \n \n this is text \n \n \n 号的 \n ```java\n public static void main(String[] args){\n   int a = 234;\n }\n```\n' +
              '![](https://img0.baidu.com/it/u=2828177625,3820269106&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500) \n # 标题22'
        },
        // markdown的菜单栏
        toolbar: {
          navigation: true, // 导航目录
          fullscreen: true, // 全屏编辑
          readmodel: true, // 沉浸式阅读
        },
        // 小窗口是否显示
        visible: false,
    }
  },
  methods: {
    // 查询文章信息
    selectArticleInfo(){
      findArticleApi(this.$route.query.id).then((res) => {
        console.log("查看",res)
        this.article = res.data;
      })
    },
    // 回到上一页
    back(){
      this.$router.back();
    },
    // 加功德
    addGongDe(){
      this.visible = !this.visible;
    },
    // 拿到dom
    showDom() {
      console.log(this.$refs.mavedit)
      const arr = this.$refs.mavedit.$refs.vShowContent.querySelectorAll("a");
      console.log(arr)
      const content =this.article.content;
      console.log( content)
      var result = content.match(/##\s+\S+\n/g);

      // 输出结果
      console.log(result);

    }
  },
  created() {
    this.selectArticleInfo();
  },

}
</script>

<style scoped lang="scss">

.container {
  width: 1200px;
  margin: 0 auto;
  .main {
    width: 1200px;
    margin: 0 auto;
    display: flex;
    .nav {
      width: 20%;
      .catalogue {
        width: 100%;
        position: sticky;
        top: 78px;
        background-color: #fff;
        border-radius: 5px;
        max-height: 60vh;
        text-align: center;
        overflow: auto;

        p {
          font-size: 15px;
        }
      }
      .catalogue:hover{
        box-shadow: 0 0 10px 0 rgba(0,0,0,0.1);
      }
      // 左侧菜单区域
      .menu {
        width: 100%;
        height: 80px;
        //background-color: #3284fa;
        position: sticky;
        top: 75vh;
        .container {
          float: right;
          width: 30%;
          height: 80px;
          // 返回上级
          .return {
            width: 30px;
            height: 30px;
            margin: 20px;
            cursor: pointer;
            img {
              width: 100%;
              height: 100%;
            }
          }
          // 小心心
          .heart {
            width: 30px;
            height: 30px;
            margin: 20px;
            cursor: pointer;
            img {
              width: 100%;
              height: 100%;
            }
          }
        }
        .screen {
          float: left;
          width: 50%;
          img {
            width: 100%;
            height: 100%;
          }
        }
      }

      .menu::after {
        display: block;
        content: '';
        clear: both;
      }

    }
    .article {
      flex: 1;
      width: 80%;
      margin-left: 10px;
      //background-color: #e37272;
      font-size: 30px;
      .md-parent{
        .markdown {
          // 该插件不能进行粘性定位，具体原因不明确
          // 现在可以通过z-index设置负值至于底层,但是置于底层一些操作就不能使用了，比如菜单无法点击
          //position: fixed;
          z-index: -1;
        }
      }
    }

  }

}


</style>
